html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, main
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main
{
    display: block;
}

body
{
    line-height: 1;
}

ol, ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after
{
    content: '';
    content: none;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

a
{
    text-decoration: none;
    color: inherit;
}

/* --------------------- Begin of styling --------------------- */
/* ---------------------------- <3 ---------------------------- */

html, body
{
    font-style: Constantina, Georgia, 'Nimbus Roman No9 L', serif;
    font-size: 16px;
}

#wrapper
{
    width: 960px;
}

.content
{
    ul
    {
        display:none;
    }
}

img
{
    display: none;
}

.sub-menu
{
    position: relative;
}

.menu
{
    li
    {
        & > a
        {
            position: relative;
            background-color: #B6FF00;
            margin: 5px;
            padding-top: 13px;
            width: 170px;
            height: 25px;
            display: inline-block;
            border-radius: 15px;
            text-align: center;
            font-size: 1.1em;
            
            &:hover
            {
                text-decoration: underline;
            }
        }
        
        &:hover
        {
            ul
            {
                display: block;
                top: -3px;
                left: 168px;
                
                li
                {
                    margin: 5px;
                    height: 15px;
                    position: absolute;
                    
                    &:nth-child(1)
                    {
                        top: -51px;
                        left: -3px;
                    }
                    
                    &:nth-child(2)
                    {
                        top: 16px;
                        left: -3px;
                    }
                    
                    a
                    {
                        background-color: #008000;
                        color: white;
                        border-radius: 10px;
                        height: 40px;
                        width: 540px;
                        text-align: left;
                        padding-left: 40px;
                        padding-top: 25px;
                        
                        &:hover
                        {
                            height: 400px;
                        }
                        
                        &:hover + img
                        {
                            display: block;
                            position: relative;
                            top: -350px;
                            left: 40px;
                            z-index: 100;
                            width: 500px;
                            border-radius: 10px;
                        }
                    }
                }
            }
        }
    }
}